<template>
  <div class="w-[100%] h-[100%] p-[10px] ">
    <div class="w-[20%]">
      <VueUiKpi :dataset="dataset" :config="config">
        <template #title="{ comment }">
          <div>
            <span>组建个数一共是 {{ comment }} 个</span>
          </div>
        </template>
      </VueUiKpi>
    </div>

  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { VueUiKpi } from 'vue-data-ui'
import urlData from '../commom/url'

onMounted(() => {})
const dataset = urlData.length
const config = {
  animationFrames: 60,
  animationValueStart: 0,
  backgroundColor: '--color-base-100',
  fontFamily: 'inherit',
  layoutClass: 'p-4 rounded-md shadow-xl mb-6 ',
  prefix: '',
  suffix: ' 个',
  title: '数量',
  titleBold: true,
  titleColor: '--color-primary-content',
  titleClass: '',
  titleCss: '',
  titleFontSize: 16,
  useAnimation: true,
  valueBold: true,
  valueColor: '#6376DD',
  valueClass: 'tabular-nums',
  valueCss: '',
  valueFontSize: 32,
  valueRounding: 0,
  analogDigits: { show: false, height: 40, color: '#6376DD', skeletonColor: '#2A2A2A' },
}
</script>
<style scoped></style>
